[React Native] アプリ開発を始めるための基礎知識 – JavaScript, ES6, JSX

モバイルアプリのクロスプラットフォームフレームワーク「React Native」はJavaScript(ES6)でコーディングします。まずはすごく基本的なところだけちょこっと学びます。

#JavaScript

#iOS

#Android

#React

#React Native

諏訪悠紀

2018.09.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

React Nativeでアプリ開発をするにはどのような知識が必要？

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

React Nativeは、プログラミング言語に主にJavaScriptでコーディングをしていきます。そのため、JavaScript（およびECMAScript）の知識が必要です。このブログではこちらのドキュメントに倣いつつ アプリ開発を始めるための基礎知識 について学習します。

Hello World

JavaScriptと言っても、ECMAScript 2015(ES2015, ES6などとも呼ぶ)で記述することが基本になります。例えばシンプルな例として、下記のコードを見てください。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

コードとしてはシンプルですが、JavaScriptのコーディングに久しい方は、見たことが無いような記述が多いと感じるかと思います。

ECMAScriptとは

ECMAScriptはJavaScriptの仕様です。Ecma Internationalという団体で標準化が行われており、ブラウザなどのJavaScriptを動作させるツールやソフトウェアはこのECMAScriptの仕様に従って動作させるようになっています。

ECMAScriptにはバージョンがあり、React Nativeでは ECMAScript 2015(ES2015, ES6などとも呼ぶ) の記述がサポートされています。

React Nativeで頻出するコードを速習する

上記のサンプルコードのうち、ES6ならではの記法をチャチャっと学びます。

`class` と　 `extends`

ES6ではクラスの定義とクラスの継承を実装できます。独自に新しいクラスを定義したり、React Native標準で用意されているクラスを継承したりできます。

class Parent {
  hello() {
    console.log('Hello!')
  }
}

class Child extends Parent {
  hello() {
    super.hello()
    console.log('Hi!')
  }
}

`import` と `from`

他のモジュールを利用する場合に使用します。従来の require の高機能版と思ってもらえると分かりやすいと思います。ファイル内に複数のクラスや関数が定義されている場合、一部だけ使いたい場合に簡単に記述できます。

export { Parent, Child }

import { Child } from './sample'

JSX

JSXはECMAScriptにXMLライクのシンタックスを追加する言語拡張です。JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。

ReactおよびReact Nativeでは機能をコンポーネント単位で管理しますが、コンポーネントを使う場合はJSXを使って書きます。

下記コードでは View というコンポーネントの中に Text というコンポーネントを置いています。View は要素を描画するためのコンポーネントで、HTMLで言うと div や span にあたります。

<View>
  <Text>Hello world!</Text>
</View>

おさらい

と言うことで、冒頭に記載したコードをおさらいしてみましょう。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

まずはじめに React と Component を react モジュールからインポートしています。この Component はReactで扱うコンポーネントのクラスです。2行目では React Native ならではの Text や View クラスをインポートしています。

クラス定義では Component を継承した HelloWorldApp を定義しています。Component には render メソッドが用意されており、この戻り値に描画用のコンポーネントを指定します。ここでは View と Text を使った描画用のコンポーネントを返しています。